<template>
  <div class="data-selector">
    <!-- 搜索条件 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item 
        v-for="field in searchFields" 
        :key="field.prop" 
        :label="field.label" 
        :prop="field.prop"
      >
        <el-input
          v-if="field.type === 'input'"
          v-model="queryParams[field.prop]"
          :placeholder="field.placeholder"
          clearable
          @keyup.enter.native="handleQuery"
        />
        <el-select
          v-else-if="field.type === 'select'"
          v-model="queryParams[field.prop]"
          :placeholder="field.placeholder"
          clearable
          filterable
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="option in field.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据列表 -->
    <el-table
      v-loading="loading"
      :data="dataList"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      height="300"
      :highlight-current-row="selectionMode === 'single'"
    >
      <el-table-column v-if="selectionMode === 'multiple'" type="selection" width="55" align="center" />
      <el-table-column 
        v-for="column in tableColumns" 
        :key="column.prop"
        :label="column.label" 
        :align="column.align || 'center'" 
        :prop="column.prop" 
        :width="column.width"
        :min-width="column.minWidth"
      >
        <template slot-scope="scope">
          <span v-if="!column.formatter">{{ scope.row[column.prop] }}</span>
          <span v-else>{{ column.formatter(scope.row[column.prop], scope.row) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 操作按钮 -->
    <div slot="footer" class="dialog-footer" style="text-align: right; margin-top: 20px;">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataSelector',
  props: {
    // 选择模式：single(单选) 或 multiple(多选)
    selectionMode: {
      type: String,
      default: 'multiple',
      validator: value => ['single', 'multiple'].includes(value)
    },
    // 搜索字段配置
    searchFields: {
      type: Array,
      default: () => []
    },
    // 表格列配置
    tableColumns: {
      type: Array,
      default: () => []
    },
    // 数据获取函数
    fetchData: {
      type: Function,
      required: true
    },
    // 已选择的数据
    selectedData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      dataList: [],
      total: 0,
      selectedItems: [],
      currentRow: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.initQueryParams()
    this.getList()
  },
  methods: {
    // 初始化查询参数
    initQueryParams() {
      this.searchFields.forEach(field => {
        this.$set(this.queryParams, field.prop, null)
      })
    },
    
    /** 查询数据列表 */
    getList() {
      this.loading = true
      this.fetchData(this.queryParams).then(response => {
        this.dataList = response.rows || response.data || []
        this.total = response.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    
    /** 重置按钮操作 */
    resetQuery() {
      this.searchFields.forEach(field => {
        this.queryParams[field.prop] = null
      })
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.selectedItems = selection
    },
    
    /** 行点击事件 */
    handleRowClick(row) {
      if (this.selectionMode === 'single') {
        this.currentRow = row
      }
    },
    
    /** 确认选择 */
    handleConfirm() {
      if (this.selectionMode === 'single') {
        if (!this.currentRow) {
          this.$message.warning('请选择一个项目')
          return
        }
        this.$emit('confirm', this.currentRow)
      } else {
        if (this.selectedItems.length === 0) {
          this.$message.warning('请选择至少一个项目')
          return
        }
        this.$emit('confirm', this.selectedItems)
      }
    },
    
    /** 取消选择 */
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.data-selector {
  padding: 20px;
}
</style>
